<script setup lang="ts">
  import { useMouse } from '@vueuse/core'
  import { motion } from 'motion-v'

  const { x, y } = useMouse()
</script>

<template>
  <div v-for="item in 4" v-show="true" v-once id="jh" :key="item" ref="testBtn" class="btn" src="hh"
    @click="() => console.log(1)" v-text="123">
  </div>
  <h1 class="bg-red-500 text-pink font-bold">You did it!</h1>
  <motion.div :animate="{ scale: 2 }" class="box w-20 h-20 bg-red" :style="{ x: 100 }"
    :whileInView="{ opacity: 1 }">
  </motion.div>
  <p>
    Visit <a href="https://vuejs.org/" rel="noopener" target="_blank">vuejs.org</a> to read the
    documentation
  </p>
</template>

<style scoped></style>
